
<template>
  <div class="notice-board">
    <s-header :name="'我的异议'" :back="'/user'"></s-header>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="dataList.length ? '没有更多了' : '暂无记录'"
          @load="onLoad"
          @offset="10"
        >
          <template v-if="dataList.length">
            <div v-for="(item, index) in dataList" :key="index" class="card-box">
              <div class="time-box" v-if="item.showTime && item.dissentTime">
                <van-image class="time-img" width="12" height="12" :src="timeImg" />
                <span class="time">异议提出日期：{{ item.dissentTime }}</span>
              </div>
              <div class="card-item" @click="goToDetail(item.id)">
                <div class="card-header">
                  <div class="header-title">
                    <div class="title">
                      异议对象：<span @click.stop="handleNoticeBoard(item.applyBaseId)">{{ item.dissentObject }}的建房公示</span>
                    </div>
                    <div :class="`notice-status ${tagClass(item.dissentStatus)}`">
                      {{ statusStrMap(item.dissentStatus) }}
                    </div>
                  </div>
                </div>
                <div class="card-body">异议内容：{{ item.dissentContent }}</div>
              </div>
            </div>
          </template>
          <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import sHeader from '@/components/SimpleHeader'
import { getPublicDissent } from '@/service/user'
import timeImg from '@/assets/Images/time.png'
import listNull from '@/assets/Images/list_null.png'

export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      timeImg: timeImg,
      listNull: listNull,
      dataList: [],
      loading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
      },
      total: 0,
      refreshing: false,
      finished: false,
    })

    onMounted(async () => {})

    //获取列表
    const getDataList = async () => {
      getPublicDissent(state.listQuery)
        .then((res) => {
          const page = res.data

          for (let index = 0; index < page.list.length; index++) {
            const item = page.list[index]
            if (item.dissentTime) {
              item.dissentTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.dissentTime)[0]
            }
            item.showTime = true
            if (page.list[index - 1] && item.dissentTime === page.list[index - 1].dissentTime) {
              item.showTime = false
            }
          }

          state.dataList = state.dataList.concat(page.list)
          state.total = page.count || 0
          state.loading = false
          if (state.dataList.length >= state.total) state.finished = true
        })
        .finally(() => {
          state.finished = true
          state.loading = false
        })
    }

    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.dataList.length < state.total) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.dataList = []
        state.refreshing = false
      }
      getDataList()
    }

    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }

    const goToDetail = (id) => {
      router.push({ path: `/user/public-dissent/detail/${id}` })
    }

    const handleNoticeBoard = (id) => {
      router.push({ path: `/notice-board/detail/${id}` })
    }

    const tagClass = (status) => {
      let className = ''
      switch (status) {
        case '0':
          className = ''
          break
        case '04':
          className = 'status-success'
          break
        case '05':
          className = 'status-danger'
          break
        default:
          break
      }
      return className
    }

    const statusStrMap = (status) => {
      let statusStr = '未办理'
      switch (status) {
        case '0':
          statusStr = '未办理'
          break
        case '04':
          statusStr = '异议成立'
          break
        case '05':
          statusStr = '异议不成立'
          break
        default:
          break
      }
      return statusStr
    }

    return {
      statusStrMap,
      tagClass,
      ...toRefs(state),
      onLoad,
      onRefresh,
      getDataList,
      goToDetail,
      handleNoticeBoard,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.notice-board {
  min-height: 100vh;
  font-size: 14px;
  color: #2e3f6a;
  font-weight: 400;
  background-color: rgb(246, 245, 250);
  .content {
    overflow: hidden;
    overflow-y: scroll;
    padding: 0 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .empty {
      display: block;
      width: 120px;
      margin: 110px auto 30px;
    }
    .card-box {
      margin-top: 10px;
      color: #2e3f6a;
      font-weight: 400;
      .time-box {
        margin-bottom: 10px;
        .time {
          color: #9297ae;
          font-size: 13px;
          font-weight: 400;
          margin-left: 6px;
        }
      }

      .header-title {
        font-size: 16px;
        font-weight: bold;
        .title {
          width: 220px;
          line-height: 28px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .fj();
        .notice-status {
          background: #e1f1ff;
          border-radius: 3px;
          color: #216eec;
          font-size: 13px;
          font-weight: 400;
          padding: 4px 14px 5px;
        }
        .status-success {
          background-color: #e8f7e0;
          color: #5eb02d;
        }
        .status-danger {
          background-color: #ffe9e9;
          color: #df3838;
        }
      }
      .card-body {
        line-height: 25px;
      }
      .van-divider {
        margin: 10px 0 0;
      }
    }
  }
}
</style>
